<style  scoped>

.room-item {
  width: 400px;
  height: 350px;
}

img{
  border-radius: 20px; /* 可以根据需求调整圆角的大小 */
  overflow: hidden; /* 确保圆角不会溢出 */
}
.title, .time {
  width: 340px;
  text-align: center; /* 文本居中 */
  margin-top: 10px; /* 上边距为 10px */
  color: #8d8b9d;

}
#font-title {
  color: black;
  font-size: 23px; /* 设置字体大小为 24 像素 */
  font-family: '楷体', 'KaiTi', cursive;
  font-weight: bold; /* 将文字加粗 */
}



</style>

<template>
  <div class="room-item">
      <div>
        <img :src = this.video.picUrl style="width: 350px; height: 200px;" alt="" @click="openPlayerPageInNewTab">
      </div>
      <div class="title" id="font-title">
        {{ video.name }}
      </div>
      <div class="time">
        时间： {{ video.time }}
      </div>
  </div>
</template>
<script>
import router from "@/router";
export default {
  props: {
    video: {
      type: Object,
      required: true
    }
  },
  methods: {
      openPlayerPageInNewTab() {
        const url = this.$router.resolve({
          name: 'player',
          query: { src: this.video.videoUrl}
        }).href;
        window.open(url, '_blank');
    }
  }
}
</script>

